/**
 * Created by zhaobo on 2016/12/23.
 */
import React, {Component} from "react";
import {StyleSheet, Image, Dimensions, View, Text, BackAndroid, ListView} from "react-native";
import ShowText from "./ShowText";
import {Card} from "react-native-elements";
const {width, height} = Dimensions.get('window');
class Rank extends Component {
  constructor() {
    super()
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      page: 1,

      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
      ])
    }
    this.onBackEvent = this.onBackEvent.bind(this);
  }

  componentDidMount() {
    // 会冲掉上一个页面的回退事件
    BackAndroid.addEventListener('hardwareBackPress', this.onBackEvent);
  }

  onBackEvent() {
    if (this.state.page != 0) {
      this.setState({page: 0});
      this.props.navigator.pop();
      return true;
    }
    return false;
  }

  render() {
    return (
      <View style={{
        backgroundColor: '#2fa3d3',
        flex:1,
      }}>
        <ListView
          renderHeader={function() {
              return (
                <View>
                  <Image source={require('./img/banner.jpg')}
                       style={styles.headerImage}>
                  <View style={{flex:1}}/>
                  <View style={styles.userInfo}>
                    <Image source={require('./img/banner.jpg')}
                           style={styles.userHeadImage}/>
                    <Text style={styles.userName}>老梁</Text>
                  </View>
                </Image>

                <View style={{alignItems: 'flex-end',marginTop: 5,marginRight:15}}>
                  <Text style={styles.joinNum}>参与健将:xx人</Text>
                </View>
              </View>
        );}}
          //列表的数据源
          dataSource={this.state.dataSource}
          //解析数据源中的数据
          renderRow={(rowData) => {
            return(
              <Card containerStyle={{marginTop:5,paddingTop:0,borderRadius:5}}
                    wrapperStyle={{}}><ShowText/>
              </Card>);
          }}/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  header: {},
  headerImage: {
    width: width,
    height: width / 2.7,
    resizeMode: 'cover',
    flexDirection: 'column',
  },
  userInfo: {
    flexDirection: 'row',
    marginLeft: 30,
    marginBottom: 5,
  },
  userHeadImage: {
    width: 50,
    height: 50,
    resizeMode: 'cover',
    borderRadius: 25,
    borderColor: '#246988aa',
    borderWidth: 3
  },
  beginButtonImage: {
    flex: 2,
    width: 150,
    height: 150,
    resizeMode: 'cover',
    borderRadius: 75,
    borderColor: '#246988',
    borderWidth: 3
  },
  userName: {
    marginLeft: 5,
    color: '#000000',
    fontSize: 16,
  },
  joinNum: {
    color: '#ffffff',
    fontSize: 15,
  },
  content_msg: {
    color: '#000000',
    fontSize: 17,
  }
});

export default Rank